<template>
  <div class="index">
    <MyHeader :cityAdcode="cityAdcode" :cityName="cityName"></MyHeader>
    <div class="container">
      <CityWeather :cityAdcode="cityAdcode" :cityName="cityName"></CityWeather>
      <MyChartOther
        :cityAdcode="cityAdcode"
        :cityName="cityName"
      ></MyChartOther>
    </div>
  </div>  
</template>

<script setup>
import MyHeader from '@/components/header/MyHeader.vue'
import CityWeather from '@/components/main/CityWeather.vue'
import MyChartOther from '@/components/main/MyChartOther.vue'

import { useRoute } from 'vue-router'
const route = useRoute()
const cityAdcode = route.query.cityAdcode
const cityName = route.query.cityName
console.log(cityAdcode, cityName)
</script>

<style lang="scss" scoped>
.index {
  --tw-bg-opacity: 1;
  background-color: rgb(0 102 138 / var(--tw-bg-opacity));
  flex-direction: column;
  min-height: 100vh;
  display: flex;

  .container {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
    flex-direction: column;
    display: flex;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 10rem;
    padding-left: 10rem;
  }
}
</style>
